<script setup lang="ts">

import {computed, reactive, ref, watch, watchEffect} from "vue";

  let name = "张三"

  let car = {
    brand:"小米",
    price:999
  }

  let msg = "<p style='color: red'>你好</p>";

  function buy() {
    alert("购买成功")
  }

  let fruits = ["苹果","香蕉","橘子"]

  let url = "https://www.baidu.com"

  function changeUrl() {
    url = "https://www.taobao.com"
  }

  let url2 = ref("https://www.baidu.com")
  function changeUrl2() {
    // ref包装的，必须要用.value的形式修改
    url2.value = "https://www.taobao.com"
  }

  let car2 = reactive({
    brand:"小米",
    price:999
  })

  function addPrice() {
    // reactive包装的，这里可以直接修改，不需要.value
    car2.price += 100
  }

  const num = ref(1)

  const totalPrice = computed(()=>car2.price * num.value)

  //8. 监听 watch/watchEffect 实施监听一些数据的变化，并执行一些动作，在script部分
  // value表示当前变化的值，oldValue表示数据之前的值，onCleanUp表示清空以后的回调
  // watch(num, (value, oldValue, onCleanUp) => {
  //   console.log('value', value)
  //   console.log('oldValue', oldValue)
  //   if (value > 3) { //或者直接使用 num.value
  //     alert('超出限购数量')
  //     num.value = 3
  //   }
  // })

  // watchEffect(() => {
  //   // 整个回调业务里，随便写哪些数据达到什么样的预期，去执行什么动作。这些数据变化后，会自动去触发watchEffect某一个分支的代码
  //   if (num.value > 3) {
  //     alert("超出限购数量")
  //     num.value = 3
  //   }
  //   if (car2.price > 1200) {
  //     alert("太贵了")
  //   }
  // })


</script>

<template>
  <!--1. 页面插值  -->
  <h2> 姓名：{{name}} </h2>
  <h2> 品牌：{{car.brand}} </h2>
  <h2> 价格：{{car.price}} </h2>


  <!--2. 指令 v-xxx  -->
  <div >{{msg}}</div>

  <!--2.1 基础指令  -->
  <!--从msg变量中解析html显示-->
  <div v-html="msg"></div>
  <!--从msg变量中解析文本显示-->
  <div v-text="msg"></div>


  <!--2.2 事件指令  -->
  <button v-on:click="buy" >购买1</button>
  <!--简写方式-->
  <button @click="buy" >购买2</button>
  <!--事件符，只可以点击一次-->
  <button @click.once="buy" >购买3</button>


  <!--2.3 判断指令  -->
  <span style="color: green" v-if="car.price < 100">很便宜</span>
  <span style="color: red" v-else>太贵了</span>


  <!--2.3 循环指令  -->
  <li v-for="f in fruits">{{f}}</li>
  <li v-for="(f,i) in fruits">{{f}} ==> {{i}}</li>


  <!--3. 属性绑定： v-bind 单项绑定（数据 ==>页面）  -->
  <a v-bind:href="url">Go !</a>
  <!--简写方式-->
  <a :href="url">Go !</a>
  <!--任何属性，包括自定义属性都支持这种方式-->
  <a :href="url" :abc="url">Go !</a>
  <!--改了之后，上面的超链接不会生效，需要下章的响应式特性-->
  <button @click="changeUrl">改变地址</button>


  <br/>
  <!--4. 响应式 ref()、reactive();-->
  <!--step1. 把基本数据或对象使用ref()包装成响应式数据-->
  <!--step2. 使用包装对象.value = "新值" 来修改-->
  <!--step3. 页面取值、属性取值：{{变量名}}-->
  <a :href="url2" :abc="url2">Go !</a>
  <button @click="changeUrl2">改变地址2</button>

  <br/>

  <!--step1. reactive()只能包装对象成响应式数据-->
  <!--step2. 使用包装对象 = "新值" 来修改-->
  <!--step3. 页面取值、属性取值：{{变量名}}-->
  <h2> 价格：{{car2.price}} </h2>
  <button @click="addPrice">加价</button>

  <!--响应式最佳实践-->
  <!--1. 我该用哪个函数？ 答：可以ref()一把梭，也可以ref()包装基本数据类型，reactive()包装对象-->
  <!--2. 使用const声明响应式常量，用const替代let。 Eg： const url2 = ref("https://www.baidu.com")-->
  <!--3. 响应式数据具有深层响应式特性（属性.属性.属性 也都是响应式的）-->


  <!-- （Edge等）浏览器安装 Vue.js devtools 插件，方便后续调试-->



  <!-- 6. 表单绑定   双向绑定： 输入框    数据 <==>页面    -->
  <!-- 见 Vue002Form.vue -->
  <!-- v-model 指令来实现表单元素的双向数据绑定 -->

  <!-- 7. 计算属性： computed -->
  <h2>数量：{{num}}</h2>
  <!-- 在template部分取值或修改ref()的值，都是直接操作，而不是通过.value 的方式，只有在script是通过.value方式 -->
  <button @click="num++">加量</button>
  <button>购买 {{totalPrice}}</button>


  <!-- 8. 监听 watch/watchEffect 实施监听一些数据的变化，并执行一些动作，在script部分 -->




</template>

<style scoped>

</style>